<template>
    <div class="song-list">
        <el-table ref="singleTableRef" :data="props.songList" :show-overflow-tooltip="true" :height="height">
            <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
            <el-table-column label="歌曲名">
                <template #default="{ row }">
                    <el-link @click="router.push(`/mv/detail?id=${row.mv}`)" :underline="false" :title='`播放mv`'
                        v-if="row.mv != 0"><i class="iconfont icon-MV111" style="color: #409eff;"></i></el-link>
                    <el-link :underline="false" :title='`此歌曲播放需要vip`' v-if="row.vip"><i class="iconfont icon-huiyuan1"
                            style="color: #409eff;"></i></el-link>
                    <el-link :underline="false" :title="row.name" @click="router.push('/song?id=' + row.id)">{{ row.name
                    }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="歌手" align="center">
                <template #default="{ row }">
                    <span v-for="item, index in row.singer" :key="item.id"><span v-if="index == 0">
                            <el-link @click="router.push('/artist?id=' + item.id)" :underline="false"
                                :title="`歌手：${item.name}`">{{
                                    item.name }}</el-link>
                        </span>
                        <span v-else> / <el-link @click="router.push('/artist?id=' + item.id)" :underline="false"
                                :title="`歌手：${item.name}`">{{ item.name
                                }}</el-link></span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="专辑" align="center">
                <template #default="{ row }">
                    <el-link :underline="false" :title="`专辑：${row.album.name}`"
                        @click="router.push('/album?id=' + row.album.id)">
                        {{ row.album.name }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column label="时长" width="75" align="center">
                <template #default="{ row }">
                    <span>{{ row.duration }}</span>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" width="150" align="center">
                <template #default="{ row }">
                    <i class="iconfont icon-bofang sjk" :title="'播放音乐'" style="margin: 0 5px; font-size: 20px;"
                        @click="play(row)"></i>
                    <i class="iconfont icon-addlist sjk" :title="'添加到播放列表'" style="margin: 0 5px;font-size: 20px;"
                        @click="add(row)"></i>
                    <i class="iconfont icon-addlike sjk" :title="'收藏'" style="margin: 0 5px;font-size: 20px;"
                        @click="like(row)"></i>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="props.songCount" v-if="props.isPagination"
            @change="currentChange" />
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { usePlayList, usePlayIndex } from '@/stores/playlist';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';

const router = useRouter()
const props = defineProps({
    songList: {
        type: Array,
        default: () => []
    },
    typeSize: {
        type: String,
        default: ''
    },
    isScroll: {
        type: Boolean,
        default: false
    },
    height: {
        type: Number
    },
    //是否分页
    isPagination: {
        type: Boolean
    },
    songCount: {
        type: Number
    }
})
const singleTableRef = ref(null)
const playList = usePlayList()
const playIndex = usePlayIndex()

onMounted(() => {

})
const emit = defineEmits(['change'])
const currentChange = (value) => {
    emit('change', value)
}
const play = (row) => {
    //查询当前播放列表是否已经存在该歌曲
    const flag = playList.playlist.find((item, index) => {
        if (item.id == row.id) {
            console.log('已经存在该歌曲，直接播放', index);
            playIndex.playIndex = index
            return true
        }
    })
    if (flag) return
    playList.playlist.push(row)
    //设置当前播放索引
    playIndex.playIndex = playList.playlist.length - 1
}

const add = (row) => {
    //查询当前播放列表是否已经存在该歌曲
    const flag = playList.playlist.find((item, index) => {
        if (item.id == row.id) {
            ElMessage.warning('播放列表已经存在该歌曲')
            return true
        }
    })
    if (flag) return
    playList.playlist.push(row)
}

const like = (row) => {
    ElMessageBox.confirm('确认收藏该歌曲吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        ElMessage.success('收藏成功')
    }).catch(() => {
        ElMessage.info('已取消收藏')
    });
}
</script>

<style lang="less" scoped>
.sjk {
    &:hover {
        color: #409eff;
    }

    &:active {
        color: black;
    }
}

.el-pagination {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>